<template>
    <div class="header" :class="{ 'border-b': borderB }">
        <div class="container td-fbc">
            <img class="logo" :src="$global.Image.logo" @click="$router.push('/')" />
            <div class="header-right td-fce td-fc">

                <div class="top-menu td-fec left-header" v-if="name != 'search'">

                    <div class="top-search td-fsc">
                        <input class="td-f1" type="text" v-model="keyWords" placeholder="请输入搜索关键词" />
                        <div class="icon-search td-fcc" @click="handelSearch('')">
                            <!-- <img :src="$global.Image.icon_search" /> -->
                            <div>搜索</div>
                        </div>
                    </div>
                    <!-- <div class="classifty-header-list">
                        <div v-for="(item,index) in searchKeywordList" :key="index">
                            <a @click="handelSearch(item)">{{item}}</a>
                            <span v-if="index != searchKeywordList.length-1">|</span>
                        </div>
                    </div> -->

                </div>
                <div class="top-menu top-search-right td-fec" >
                    <!-- <img class="icon-avatar" v-if="userInfo.avatar" :src="userInfo.avatar" />
                    <div class="icon-avatar-default td-fcc" v-else>
                        <img src="../assets/svg/svg_avatar.svg" />
                    </div>
                    <span>{{ userInfo.nickname }}</span> -->

                    <!--<router-link to="/userCenter">个人中心</router-link>-->

                    <router-link to="/" class="search-right-icon">
                        <img src="../assets/second_icon/header_index_icon.png" alt="">
                        <div>首页</div>
                    </router-link>
                    <router-link to="/cart" class="search-right-icon">
                        <img src="../assets/second_icon/header_shopcar_icon.png" alt="">
                        <div>我的购物车</div>
                    </router-link>
                    <router-link to="/userCenter" class="search-right-icon">
                        <img src="../assets/second_icon/header_user_icon.png" alt="">
                        <div>个人中心</div>
                    </router-link>
                    <!-- <span>|</span> -->
                    <!-- <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                        <el-submenu index="2">
                            <template slot="title">个人中心</template>
                            <el-menu-item index="2-1">
                                <router-link tag="li" to="/userCenter">个人主页</router-link>
                            </el-menu-item>
                            <el-menu-item index="2-2">
                                <router-link tag="li" to="/authen">实名认证</router-link>
                            </el-menu-item>
                            <el-menu-item index="2-3">
                                <router-link tag="li" to="/order">我的订单</router-link>
                            </el-menu-item>
                            <el-menu-item index="2-4">
                                <router-link tag="li" to="/coupon">我的优惠券</router-link>
                            </el-menu-item>
                            <el-menu-item index="2-5">
                                <router-link tag="li" to="/collection">我的收藏</router-link>
                            </el-menu-item>
                            <el-menu-item index="2-6">
                                <router-link tag="li" to="/integral">我的积分</router-link>
                            </el-menu-item>
                            <el-menu-item index="2-7">
                                <router-link tag="li" to="/changePwd">修改密码</router-link>
                            </el-menu-item>
                            <el-menu-item index="2-8">
                                <router-link tag="li" to="/address">收货地址</router-link>
                            </el-menu-item>
                            <el-menu-item index="2-9">
                                <router-link tag="li" to="/setting">个人资料</router-link>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu> -->
                    <!-- <span>|</span>
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                        <el-submenu index="2">
                            <template slot="title">帮助中心</template>
                            <el-menu-item index="2-1" v-for="(item,index) in helpList" :key="index">
                                <router-link tag="li" :to="'/help?index='+index+'&id='+item.id">{{item.title}}</router-link>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu> -->
                    <!-- <span>|</span>
                    <a @click="logout">退出账户</a> -->
                </div>
        
            </div>
        </div>
    </div>
</template>

<script>
import { getLogout, helpHome } from "@api/user";
import { getSearchKeyword } from "@api/store";
import { mapGetters } from "vuex";
export default {
    name: "header",
    props: {
        borderB: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            keyWords: "",
            searchKeywordList: [],
            helpList: "",
            name: "",
        };
    },
    watch: {
        $route(to, from) {
            this.name = to.name;
            if (this.$route.name != "search") {
                this.keyWords = "";
            }
        },
    },
    computed: mapGetters(["userInfo", "isLogin", "cartNum"]),
    mounted() {
        this.name = this.$route.name;
        this.searchKeyword();
        this.getHelpList();
        this.$store.dispatch("CART_NUM");
    },
    methods: {
        getHelpList() {
            helpHome().then(
                (res) => {
                    this.helpList = res.data.category;
                },
                (error) => {
                    this.$dialog.message(error.msg);
                }
            );
        },
        searchKeyword() {
            getSearchKeyword().then((res) => {
                this.searchKeywordList = res.data || [];
            });
        },
        handelSearch(item) {
            if (item) {
                this.keyWords = item;
            }
            if (this.keyWords) {
                this.$router.push("/search/?keyWords=" + this.keyWords);
            } else {
                this.$dialog.toast({ mes: "请输入搜索关键词!" });
            }
        },
        logout() {
            let that = this;
            this.$dialog.confirm({
                title: "退出",
                mes: "确认退出当前账户?",
                opts: [
                    {
                        txt: "继续浏览",
                        color: false,
                        callback: () => {},
                    },
                    {
                        txt: "立即退出",
                        color: true,
                        callback: () => {
                            that.submit();
                        },
                    },
                ],
            });
        },
        submit() {
            getLogout()
                .then((res) => {
                    this.$store.commit("LOGOUT");
                    location.href = location.origin;
                })
                .catch((err) => {
                    // console.log(err);
                });
        },
    },
};
</script>
<style  >
.el-menu--horizontal > .el-submenu .el-submenu__title {
    height: 42px;
    line-height: 42px;
    border-bottom: 0;
}
</style>
<style   lang="scss" scoped>
.border-b {
    border-bottom: solid #eee 1px;
}
.header-right {
    flex-direction: row;
    align-items: flex-start;
}
.header {
    padding: 70px 0 57px;
    .logo {
        width: 250px;
        display: block;
        height: 60px;
        cursor: pointer;
    }
    .left-header {
        flex-direction: column;
        margin-left: 30px;
        justify-content: flex-start;
    }
    .top-menu {
        font-size: 14px;
        color: #999;
        span {
            padding: 0 10px;
        }
        a {
            color: #666666;
            line-height: 20px;
        }
        a:hover {
            color: #DA213D;
        }
    }
    .icon-avatar {
        display: block;
        height: 25px;
        width: 25px;
        border-radius: 50%;
        box-shadow: inset 0 0 2px rgba($color: #000000, $alpha: 0.2);
    }
    .icon-avatar-default {
        height: 25px;
        width: 25px;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: inset 0 0 2px rgba($color: #000000, $alpha: 0.2);
        img {
            width: 15px;
            height: 15px;
            margin-left: 3px;
        }
    }
    .top-search {
        // height: 40px;
        // border-radius: 20px;
        // margin-left: 30px;
        overflow: hidden;

        input {
            // margin-top: 3px;
            color: #333;
            height: 38px;
            width: 400px;
            background: #ffffff;
            border: 2px solid #da213d;
            outline: medium;
            padding: 0 20px;
        }
        .icon-search {
            width: 90px;
            height: 42px;
            background: linear-gradient(143deg, #da213d 23%, #da213d 90%);
            font-size: 16px;
            text-align: center;
            color: #ffffff;
            line-height: 40px;
            cursor: pointer;
        }
    }
    ::v-deep .el-submenu__title {
        padding: 0;
        color: #666 !important;
    }
}
.classifty-header-list {
    display: flex;
    width: 100%;
    div {
        margin-top: 10px;
    }
}
.cart-box {
    position: relative;
    .cart-num {
        display: block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: normal;
        font-size: 10px;
        line-height: 1;
        background-color: #e31d1a;
        position: absolute;
        top: -10px;
        right: -6px;
        z-index: 1;
    }
}
.container {
    justify-content: flex-start;
    align-items: flex-start;
}
.top-search-right {
    margin-left: 13px;
    .search-right-icon {
        height: 42px;
        background: #fff8f8;
        border: 1px solid #d8c5c2;
        border-radius: 1px;
        display: flex;
        margin-left: 10px;
        align-items: center;
        padding: 0 15px;
        box-sizing: border-box;
        img {
            width: 20px;
            height: 20px;
            object-fit: contain;
        }
        div {
            margin-left: 9px;
            font-size: 14px;
            color: #666666;
        }
    }
}
</style>
